<!-- 图片验证码 -->
<template>
  <div id="Authcode" v-show="show">
    <div class="AuthcodeBox">
      <div class="title">请输入图片验证码</div>
      <div class="imgAuth clear">
        <input
          class="fl"
          type="text"
          name="imageAuthcode"
          v-model.trim="imageAuthcode"
        />
        <img class="fl" :src="poke" alt="" />
        <span class="fr" @click="imgcard">
          <i class="icon sp-refreshb"></i><br />
          点击刷新
        </span>
      </div>
      <div class="operation clear flex">
        <span class="oper_btn grow" @click="cancel">取消</span>
        <span class="oper_btn grow" @click="confirm">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
import { authCode } from "../mixins/authCode";
import { CLIENT } from "@/common/const";
export default {
  mixins: [authCode],

  props: {
    show: {
      default: false,
      type: Boolean,
    },
  },
  data() {
    return {
      imageAuthcode: "",
      poke: "",
      path: CLIENT,
    };
  },
  watch: {
    show() {
      if (this.show == true) {
        this.poke = `${
          this.path
        }/client/generateImageAuthcode.htm?${Date.now()}`;
      }
    },
  },
  components: {},

  computed: {},

  mounted() {},
};
</script>
<style lang="scss" scoped>
#Authcode {
  background: rgba(0, 0, 0, 0.36);
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  .AuthcodeBox {
    width: 319px;
    height: 194px;
    background: #fff;
    position: absolute;
    top: 50%;
    margin-top: -97px;
    left: 50%;
    margin-left: -159.5px;
    .title {
      line-height: 47px;
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      text-align: center;
      border-bottom: 1px solid #f2f2f2;
    }
    .imgAuth {
      width: 300px;
      margin: 0 auto;
      padding-top: 33px;
      input {
        width: 140px;
        height: 40px;
        background: #ffffff;
        border: 1px solid #bdbdbd;
        margin-right: 10px;
        font-size: 16px;
        font-weight: 400;
        line-height: 40px;
        color: #333333;
        padding: 0 5px;
      }
      img {
        margin-top: 1px;
        width: 79px;
        height: 40px;
      }
      span {
        font-size: 12px;
        font-weight: 400;
        text-align: center;
        color: #999999;
        padding-top: 5px;
        cursor: pointer;
        &:hover {
          color: #5592e5;
          .icon {
            background-position: -76px -210px;
          }
        }
        .icon {
          margin-bottom: 6px;
          display: inline-block;
        }
      }
    }
    .operation {
      position: absolute;
      bottom: 0;
      width: 100%;
      line-height: 40px;
      background: #f5f5f5;
      border-top: 1px solid #bdbdbd;
      color: #333333;
      font-size: 16px;
      font-weight: 400;
      text-align: center;
      .oper_btn {
        cursor: pointer;
        &:first-child {
          border-right: 1px solid #bdbdbd;
        }
        &:hover {
          color: #ea2827;
        }
      }
    }
  }
}
</style>
